<template>
  <div id="welcome">
    <el-row type="flex" class="flex-row">
      <el-col :span="12" class="float-card">
        <el-skeleton :loading="loading" animated>
          <template slot="template">
            <div class="cbox">
              <el-skeleton-item variant="h1" style="width: 400px;height: 53px;margin: 40px 0;font-size: 2.5rem"/>
              <el-skeleton-item variant="image" style="width: 70px; height: 70px;"/>
              <div class="btn-box">
                <el-skeleton-item variant="button" class="welbtn"/>
                <el-skeleton-item variant="button" class="welbtn"/>
                <el-skeleton-item variant="button" class="welbtn"/>
              </div>
              <el-skeleton-item variant="text" style="width: 100px"/>
            </div>
          </template>
          <template>
            <div style="display: flex;flex-flow: column;align-items: center;">
              <h1 style="font-size: 2.5rem">欢迎使用无奇不邮</h1>
              <img src="https://lxpstr-1307443497.cos.ap-nanjing.myqcloud.com/Logo.cf7c580b.svg" alt="无奇不邮Logo" title="无奇不邮Logo" width="128" height="128"/>
              <div class="btn-box">
                <el-button plain icon="el-icon-notebook-2" class="welbtn" @click="openPage('/Help')">帮助手册
                </el-button>
                <el-button plain icon="el-icon-mobile-phone" class="welbtn" @click="openPage('/AppDownload')">APP下载
                </el-button>
                <el-button plain icon="el-icon-s-management" class="welbtn" @click="openPage('/AboutProject')">关于项目
                </el-button>
                <!--关于我们的抽屉-->
                <el-drawer
                    :title="$route.name"
                    :visible.sync="drawerVis"
                    @close="clearPage"
                    size="88%">
                  <router-view/>
                </el-drawer>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-col>
      <el-col :span="10" class="float-card">
        <ServersList></ServersList>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import ServersList from "@/components/ServersList";

export default {
  name: "Welcome",
  data() {
    return {
      drawerVis: false
    }
  },
  created() {
    //如果页面刷新,并且抽屉还是打开的那么在刷新后自动将抽屉显示
    if (this.$route.path !== '/') {
      this.drawerVis = true;
    }
  },
  methods: {
    openPage(path) {
      this.$router.push(path);
      this.drawerVis = true;
    },
    clearPage() {
      this.$router.replace('/');
      this.drawerTitle = '';
    }
  },
  components: {
    ServersList
  },
  computed: {
    ...mapGetters({loading: "getLoading"})
  }
}
</script>

<style scoped>
.cbox {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.btn-box {
  margin: 40px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: row wrap;
}

.flex-row {
  justify-content: space-around;
}

.float-card:first-child {
  min-height: 500px;
}

.welbtn {
  width: 180px;
  height: 150px;
  font-size: 20px;
}

@media screen and (max-width: 1290px) {
  .flex-row {
    flex-flow: column wrap;
    align-items: center;
  }

  .float-card {
    width: 100%;
  }

  .float-card + .float-card {
    margin-top: 10px;
  }
}

@media screen and (max-width: 725px) {
  .flex-row {
    flex-flow: column wrap;
    align-items: center;
  }

  .float-card:first-child {
    height: auto;
  }

  .btn-box {
    align-items: center;
    flex-flow: column wrap;
  }

  .el-button + .el-button {
    margin: 10px 0 0 0;
  }

  .float-card {
    width: 100%;
  }

  .float-card + .float-card {
    margin-top: 10px;
  }

  .welbtn {
    height: 60px;
    font-size: 20px;
  }
}
</style>